<template>
	<view class="my">
		<view class="my-header">
			<view class="header-back">
				<view class="back-inner"></view>
				<view class="back-img" :style="{'background-image':'url('+userInfo.imgUrl+')'}"></view>
			</view>
			<view class="header-main">
				<view class="header-config">
					<image @click="goConfog()" class="config-image" src="@/static/image/chilun.png" mode=""></image>
				</view>
				<view class="header-user-info" @click="loginStatus?myInfo():goLogin()">
					<image class="user-image" :src="loginStatus?userInfo.imgUrl:'../../static/image/touxiang.png'" mode=""></image>
					<view style="text-align: center;">{{loginStatus?userInfo.nickName:'未登录'}}</view>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="my-order">
			<view class="order-text">
				<view style="font-weight: bold;">我的订单</view>
				<view style="font-size: 28rpx;" @click="goMyOrder" class="f-color">全部订单 <image style="width: 20rpx; height: 20rpx;" src="../../static/image/right.png" mode=""></image></view>
			</view>
			<view class="order-list">
				<view class="order-item">
					<image class="item-image" src="@/static/image/qianbao.png" mode=""></image>
					<view class="item-text f-color">待付款</view>
				</view>
				<view class="order-item">
					<image class="item-image" src="@/static/image/a-fahuodaifahuo.png" mode=""></image>
					<view class="item-text f-color">待发货</view>
				</view>
				<view class="order-item">
					<image class="item-image" src="@/static/image/icon-receive.png" mode=""></image>
					<view class="item-text f-color">待收货</view>
				</view>
				<view class="order-item">
					<image class="item-image" src="@/static/image/pingjia.png" mode=""></image>
					<view class="item-text f-color">待评价</view>
				</view>
				<view class="order-item">
					<image class="item-image" src="@/static/image/tuikuantuihuo.png" mode=""></image>
					<view class="item-text f-color">待退款</view>
				</view>
			</view>
		</view>
		<!-- 列表1 -->
		<view class="my-content">
			<view class="content-list">
				<view class="content-item">
					<view>我的收藏</view>
					<view> <image class="content-right-logo" src="../../static/image/right.png" mode=""></image> </view>
				</view>
				<view class="content-item">
					<view>我的优惠券</view>
					<view><image class="content-right-logo" src="../../static/image/right.png" mode=""></image></view>
				</view>
				<view class="content-item">
					<view>我的积分</view>
					<view><image class="content-right-logo" src="../../static/image/right.png" mode=""></image></view>
				</view>
				<view class="content-item" style="margin-top: 40rpx;">
					<view>加入VIP</view>
					<view><image class="content-right-logo" src="../../static/image/right.png" mode=""></image></view>
				</view>
				<view class="content-item" style="margin-top: 40rpx;">
					<view>帮助中心</view>
					<view><image class="content-right-logo" src="../../static/image/right.png" mode=""></image></view>
				</view>				
				<view class="content-item" href="http://124.220.20.60:4001/login">
					<view>商家入驻网址 http://124.220.20.60:4001/login</view>
					<view><image class="content-right-logo" src="../../static/image/right.png" mode=""></image></view>
				</view>				
				<!-- <view class="content-item">
					<view>联系客服</view>
					<view><image class="content-right-logo" src="../../static/image/right.png" mode=""></image></view>
				</view> -->
			</view>
		</view>
		<Tabbar currentPage='my'></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '../../components/common/Tabbar.vue'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		components:{
			Tabbar
		},
		computed:{
			...mapState({
				loginStatus:state=>state.user.loginStatus,
				userInfo:state=>state.user.userInfo
			})
		},
		methods: {
			// 进入我的订单页
			goMyOrder(){
				uni.navigateTo({
					url:'../my-order/my-order'
				})
			},
			// 进入设置
			goConfog(){
				uni.navigateTo({
					url:'../my-config/my-config'
				})
			},
			goLogin(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
			myInfo(){
				uni.showToast({
					title:'更改头像功能研发中',
					icon:'none'
				})
			}
			
		}
	}
</script>

<style scoped>
.my{
	background-color: #ededed;
	height: 100vh;
}
.my-header{ 
	/* background-color:#aaaaff ; */
	width: 100%;
	height: 400rpx;
}
.header-back{
	width: 100%;
	height: 100%;
	/* background-color:#aaaaff ; */
}
.back-img{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.back-inner{
	float: left;
	background: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	-webkit-backdrop-filter: blur(30rpx);
	backdrop-filter: blur(30rpx);
	z-index: 1;
}
.header-main{
	z-index: 2;
	position: relative;
	top: -400rpx;
}
.header-config{
	position: absolute;
	padding: 40rpx;
}
.config-image{
	width: 40rpx;
	height: 40rpx;
}
.user-image{
	margin-top: 100rpx;
	width: 120rpx;
	height: 120rpx;
	border: 4rpx solid #8a8a8a;
	border-radius: 50%;
	overflow: hidden;
}
.header-user-info{
	position: absolute;
	left: 50%;
	margin-left: -60rpx;
	width: 120rpx;
	font-size: 30rpx;
	color: #FFFFFF;
	font-weight: bold;
}
.my-order{
	background-color: #FFFFFF;
	width: 100%;
	height: 240rpx;
}
.order-text{
	padding: 0 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
}
.order-list{
	height: 140rpx;
	width: 100%;
	display: flex;
}
.order-item{
	display: flex;
	flex-direction:column ;
	align-items: center;
	flex: 1;
	justify-content: center;
}
.item-image{
	width: 60rpx;
	height: 60rpx;
}
.my-content{
	margin-top: 40rpx;

}
.content-item{
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	font-size: 30rpx;
	padding: 24rpx 30rpx;
	border-bottom: 1px solid #e1e1e1;
	font-weight: bold;
}
.content-right-logo{
	width: 30rpx;
	height: 30rpx;
}
</style>
